//导入react和react-dom
// react负责创建元素-虚拟的Dom
import React from 'react';
// reactDOM负责渲染react元素
import ReactDOM from 'react-dom';

// 列表渲染，也叫数据渲染
const songs = ['温柔', '倔强', '私奔到月球'];

// 注意：列表一定要加上key，
// key口诀：有id用id，没id用索引
const list = (
  <div>
    {/* 因为map有返回值 */}
    {songs.map((item, index) => {
      return <h1 key={index}>{item}</h1>;
    })}
  </div>
);

// 渲染元素到页面
// 语法：ReactDOM.render（react元素，真实的dom作为挂载点）
ReactDOM.render(list, document.getElementById('root'));
